<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { useCenterStore } from '@/stores';

const activeName = ref('first')
const useCenter = useCenterStore()
const FireCenterDetailsForm2 = ref()

// const centerList = inject<any>('centerList')

const handleClick = async (tab: TabsPaneContext, event: Event) => {
  console.log(tab.index, event)
  if (tab.index == '1') {
    // tabIndex.value = tab.index
  }
}
const submitForm = async () => {
  // await FireCenterDetailsForm2.value.formRef.validate()
  console.log('过校验了没')
  useCenter.centerChange(false)
}
</script>

<template>
  <div class="fireCenterDetails-page">
    <div class="centerDetail-page">
      <el-header>湖州长兴县消防中心</el-header>
      <el-main>
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="基本信息" name="first">
            <div class="base">
              <FireCenterDetailsForm
                ref="FireCenterDetailsForm2"
              ></FireCenterDetailsForm>
            </div>
          </el-tab-pane>
          <el-tab-pane label="人员信息" name="second">
            <!-- <personalInformation
              :loading="loading"
              :centerTable="personnelTable"
            ></personalInformation> -->

            <personalInformation></personalInformation>
            <ElDialogCommon></ElDialogCommon>
          </el-tab-pane>
          <el-tab-pane label="设备信息" name="third">
            <EquipmentInformation></EquipmentInformation>
            <ElDialogCommon></ElDialogCommon>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <!-- <el-footer>
        <el-button type="primary" @click="submitForm"> 保存 </el-button>
      </el-footer> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.el-header {
  text-align: center;
  font-size: 24px;
  padding-top: 10px;
  font-weight: 700;
}
.el-main {
  // margin: -10px 20px 0 20px;
  margin-top: -10px;
  ::v-deep .demo-tabs > .el-tabs__content {
    // padding: 32px;
    // color: #02adc4;
    font-size: 32px;
    font-weight: 600;
  }
  .base {
    padding: 10px 16%;
  }
}
.el-footer {
  text-align: center;
}
</style>
